<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="/WEB-INF/pages/include/css-resource.jsp"%>

<style type="text/css">
html, body {
	height: 100%;
	width: 100%;
}

body {
	background:
		url("${pageContext.request.contextPath}/resources/images/login_bg.jpg")
		no-repeat center fixed;
	background-size: cover;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.login-card {
	width: 600px;
}
</style>

<title>登录</title>
</head>
<body>
	<div class="card login-card">
		<div class="card-header text-center">通用权限管理系统</div>
		<div class="card-body">
			<form action="${pageContext.request.contextPath}/user/login.html"
				method="post">
				<div class="form-group">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"> <i class="fas fa-user"></i>
							</span>
						</div>
						<input type="text" class="form-control" id="user" name="user"
							placeholder="请输入用户名" autocomplete="off" required autofocus>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"> <i class="fas fa-lock"></i>
							</span>
						</div>
						<input type="password" class="form-control" id="password"
							name="password" placeholder="请输入密码" required>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"> <i class="fas fa-image"></i>
							</span>
						</div>
						<input type="text" class="form-control" id="captch" name="captch"
							placeholder="请输入验证码" autocomplete="off" maxlength="4" required>
						<div class="input-group-append">
							<span class="input-group-text" style="padding: 0px;"> <img
								id="captcha-img" alt="验证码图片" style="cursor: pointer;"
								onclick="changeCaptcha()"
								src="${pageContext.request.contextPath}/captcha.html">
							</span>
						</div>
					</div>
				</div>
				<div class="form-group text-right">
					<a href="javascript:changeCaptcha();">验证码看不清，单击更换</a>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-block btn-lg">登录</button>
				</div>
			</form>
			<div style="color: red;">${requestScope.message}</div>
		</div>
	</div>
	<%@include file="/WEB-INF/pages/include/js-resource.jsp"%>
	<script type="text/javascript">
		function changeCaptcha() {
			$("#captcha-img").attr(
					"src",
					"${pageContext.request.contextPath}/captcha.html?time="
							+ new Date().getTime());
		}
	</script>
</body>
</html>